<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Developed By M Abdur Rokib Promy">
<meta name="author" content="cosmic">
<meta name="keywords" content="Bootstrap 3, Template, Theme, Responsive, Corporate, Business">
<link rel="shortcut icon" href="${Prefix}img/favicon.png">
<title>
<#if Site.seoTitle?? && Site.seoTitle !="">${Site.seoTitle}<#else>${Site.name}</#if>
</title>
<link href="${Prefix}css/header.css" rel="stylesheet">
<link href="${Prefix}css/footer.css" rel="stylesheet">
<link href="${Prefix}css/banner.css" rel="stylesheet">
<link href="${Prefix}css/main.css" rel="stylesheet">
<link href="${Prefix}css/zcjsq.less" rel="stylesheet/less" type="text/css">

<link href="${Prefix}node_modules/animate.css/animate.min.css" rel="stylesheet" >
<link href="${Prefix}node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="${Prefix}node_modules/element-ui/lib/theme-chalk/index.css" rel="stylesheet">
<link href="${Prefix}node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">

<script src="${Prefix}node_modules/jquery/dist/jquery.min.js"></script>
<script src="${Prefix}node_modules/wowjs/dist/wow.min.js"></script>
<script src="${Prefix}node_modules/swiper/dist/js/swiper.min.js"></script>
<script src="${Prefix}node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="${Prefix}node_modules/less/dist/less.js"></script>
<script src="${Prefix}node_modules/vue/dist/vue.js"></script>
<script src="${Prefix}node_modules/element-ui/lib/index.js"></script>
</head>

<body>
<!--header start-->
<@cms_include ssi="false"file="header.template.html"></@cms_include>
<!--header end-->
<@cms_include ssi="false"file="banner.template.html"></@cms_include>

<@cms_catalog alias="zcjsq" level="Child" size="1">
<#list DataList as c1>
<#assign link = c1.link>
</#list>
</@cms_catalog >
<div class="container zcjsq">
    <div class="content-column">
        <div class="row">
            <div class="col col-lg-12">
                <div class="top-title"><img src="${Prefix}images/lc-1.png" alt=""></div>
                <div class="top-step">
                    <div class="step-item">
                        <img src="${Prefix}images/lc-2.png" alt="">
                        <div>1、输入企业名称</div>
                    </div>
                    <div class="line"></div>
                    <div class="step-item">
                        <img src="${Prefix}images/lc-3.png" alt="">
                        <div>2、完善企业简历</div>
                    </div>
                    <div class="line"></div>
                    <div class="step-item">
                        <img src="${Prefix}images/lc-4.png" alt="">
                        <div>3、获取推荐报告</div>
                    </div>
                </div>

                <div id="appFrom">
                    <div class="form-wrapper">
                        <el-form ref="form" :rules="rules" :model="form" label-position="left" label-width="150px">
                            <el-row :gutter="20">
                                <el-col :span="18">
                                    <el-form-item label="企业名称:" prop="enterpriseName">
                                        <el-input v-model="form.enterpriseName" size="small" placeholder="请输入"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <div class="title">一、企业基本信息</div>
                            <el-row :gutter="20">
                                <el-col :span="18">
                                    <el-form-item label="注册资本:" prop="registCapital">
                                        <el-input v-model="form.registCapital" size="small" placeholder="请输入"></el-input><span class="unit">万元</span>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="18">
                                    <el-form-item label="统一社会信用代码:" prop="creditCode">
                                        <el-input v-model="form.creditCode" size="small" placeholder="请输入"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="18">
                                    <el-form-item label="成立日期:" prop="establishDate">
                                        <el-date-picker size="small" type="date" placeholder="请选择" v-model="form.establishDate" style="width: 100%;">
                                        </el-date-picker>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row :gutter="20">
                                <el-col :span="18">
                                    <el-form-item label="企业类型:" prop="enterpriseType">
                                        <el-select clearable size="small" v-model="form.enterpriseType" placeholder="请选择" style="width: 100%;">
                                            <@cms_tag_word group="tags_enterprise_type" page="false" size="6">
                                            <#list DataList as tag>
                                            <el-option label="${tag.word}" value="${tag.word}"></el-option>
                                            </#list>
                                            </@cms_tag_word >    
                                          </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row :gutter="20">
                                <el-col :span="18">
                                    <el-form-item label="注册地址:">
                                        <div style="display: flex;justify-content: space-between;">
                                            <el-form-item label-width="0" prop="province">
                                                <el-select @change="provinceChange" clearable size="small" v-model="form.province" placeholder="请选择">
                                                    <el-option :label="item.name" :value="item.code" :key="item.code" v-for="(item,index) in province"></el-option>
                                                </el-select>
                                            </el-form-item>
                                        
                                            <el-form-item label-width="0" prop="city">
                                                <el-select @change="cityChange" clearable size="small" v-model="form.city" placeholder="请选择">
                                                    <el-option :label="item.name" :value="item.code" :key="item.code" v-for="(item,index) in city"></el-option>
                                                </el-select>
                                            </el-form-item>
                                    
                                            <el-form-item label-width="0" prop="area">
                                                <el-select @change="areaChange" clearable size="small" v-model="form.area" placeholder="请选择">
                                                    <el-option :label="item.name" :value="item.code" :key="item.code" v-for="(item,index) in area"></el-option>
                                                </el-select>
                                            </el-form-item>
                                        </div>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row :gutter="20">
                                <el-col :span="18">
                                    <el-form-item label="企业性质:" prop="enterpriseNature">
                                        <el-select clearable size="small" v-model="form.enterpriseNature" placeholder="请选择" style="width: 100%;">
                                            <@cms_tag_word group="tags_enterprise_nature" page="false" size="6">
                                            <#list DataList as tag>
                                            <el-option label="${tag.word}" value="${tag.word}"></el-option>
                                            </#list>
                                            </@cms_tag_word >    
                                          </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="18">
                                    <el-form-item label="所属领域:" prop="enterpriseField">
                                        <el-select clearable size="small" v-model="form.enterpriseField" placeholder="请选择" style="width: 100%;">
                                            <@cms_tag_word group="tags_domain" page="false" size="6">
                                            <#list DataList as tag>
                                            <el-option label="${tag.word}" value="${tag.word}"></el-option>
                                            </#list>
                                            </@cms_tag_word >    
                                          </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            
                            <div class="line"></div>
                            <div class="title">二、人事信息</div>

                            <el-row :gutter="20">
                                <el-col :span="18">
                                    <el-form-item label="企业总人数:" prop="personnelTotalNum">
                                        <el-input v-model="form.personnelTotalNum" size="small" placeholder="请输入"></el-input><span class="unit">人</span>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="18">
                                    <el-form-item label="领军人数:" prop="personnelLeaderNum">
                                        <el-input v-model="form.personnelLeaderNum" size="small" placeholder="请输入"></el-input><span class="unit">人</span>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="18">
                                    <el-form-item label="大专及以上人数:" prop="personnelCollegeNum">
                                        <el-input v-model="form.personnelCollegeNum" size="small" placeholder="请输入"></el-input><span class="unit">人</span>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row :gutter="20">
                                <el-col :span="18">
                                    <el-form-item label="本科及以上人数:" prop="personnelBachelorNum">
                                        <el-input v-model="form.personnelBachelorNum" size="small" placeholder="请输入"></el-input><span class="unit">人</span>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="18">
                                    <el-form-item label="硕士及以上人数:" prop="personnelMasterNum">
                                        <el-input v-model="form.personnelMasterNum" size="small" placeholder="请输入"></el-input><span class="unit">人</span>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="18">
                                    <el-form-item label="博士及以上人数:" prop="personnelDoctorNum">
                                        <el-input v-model="form.personnelDoctorNum" size="small" placeholder="请输入"></el-input><span class="unit">人</span>
                                    </el-form-item>
                                </el-col>
                            </el-row>
    
                            <div class="line"></div>
                            <div class="title">三、经营数据 （单位：万元）</div>
                            <el-table
                                :highlight-current-row="false"
                                :data="tableData"
                                border
                                style="width: 100%">
                                <el-table-column
                                prop="C0"
                                label="年份"
                                width="151">
                                </el-table-column>
                                <el-table-column
                                prop="C1"
                                label="总资产">
                                    <template slot-scope="scope">
                                        <el-input v-model="tableData[scope.$index].C1"></el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                prop="C2"
                                label="净利润">
                                    <template slot-scope="scope">
                                        <el-input v-model="tableData[scope.$index].C2"></el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                prop="C3"
                                label="营业收入">
                                    <template slot-scope="scope">
                                        <el-input v-model="tableData[scope.$index].C3"></el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                prop="C4"
                                label="主营业务收入">
                                    <template slot-scope="scope">
                                        <el-input v-model="tableData[scope.$index].C4"></el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                prop="C5"
                                label="税收">
                                    <template slot-scope="scope">
                                        <el-input v-model="tableData[scope.$index].C5"></el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                prop="C6"
                                label="研发投入">
                                    <template slot-scope="scope">
                                        <el-input v-model="tableData[scope.$index].C6"></el-input>
                                    </template>
                                </el-table-column>
                            </el-table>
    
                            <div class="line"></div>
                            <div class="title">三、知识产权</div>
                            <div class="c-table">
                                <div class="c-table-item">
                                    <div class="th">知识产权总数</div><div class="td">
                                        <el-form-item label-width="0" prop="intellectualPropertyNum">
                                            <el-input v-model="form.intellectualPropertyNum"></el-input>
                                        </el-form-item>
                                    </div>
                                </div>
                                <div class="c-table-item">
                                    <div class="th">专利总数</div><div class="td">
                                        <el-form-item prop="patentNum" label-width="0">
                                            <el-input  v-model="form.patentNum"></el-input>
                                        </el-form-item>
                                    </div>
                                </div>
                                <div class="c-table-item">
                                    <div class="th">注册商标总数</div><div class="td">
                                        <el-form-item prop="trademarkNum" label-width="0">
                                            <el-input  v-model="form.trademarkNum"></el-input>
                                        </el-form-item>
                                    </div>
                                </div>
                                <div class="c-table-item">
                                    <div class="th">软件著作权总数</div><div class="td">
                                        <el-form-item prop="softwareCopyrightNum" label-width="0">
                                            <el-input  v-model="form.softwareCopyrightNum"></el-input>
                                        </el-form-item>
                                    </div>
                                </div>
                            </div>

                            <div class="line"></div>
                            <div class="title">五、项目信息</div>
                            <div class="c-table">
                                <div class="c-table-item">
                                    <div class="th">项目总投资（万元）</div><div class="td">
                                        <el-form-item prop="projectInvestment" label-width="0">
                                            <el-input  v-model="form.projectInvestment"></el-input>
                                        </el-form-item>
                                    </div>
                                </div>
                                <div class="c-table-item">
                                    <div class="th">项目实施时间</div><div class="td">
                                        <el-form-item prop="projectTime" label-width="0">
                                            <el-input  v-model="form.projectTime"></el-input>
                                        </el-form-item>
                                    </div>
                                </div>
                                <div class="c-table-item">
                                    <div class="th">项目情况描述</div><div class="td">
                                        <el-form-item prop="projectDesc" label-width="0">
                                            <el-input  v-model="form.projectDesc"></el-input>
                                        </el-form-item>
                                    </div>
                                </div>
                            </div>
                        </el-form>
                    </div>

                    <div class="form-btn-box">
                        <button @click="submitForm('form','${link}')" class="my-button" type="default">搜索</button>
                        <button @click="resetForm('form')" class="my-button" type="primary">重置</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<@cms_include ssi="false"file="footer.template.html"></@cms_include>
</body>

<script>
    
    new Vue({
        el: '#appFrom',
        data: function() {
            return {
                form:{
                    enterpriseName:'',
                    registCapital:'',
                    creditCode:'',
                    establishDate:'',
                    enterpriseType:'',
                    province:'',
                    city:'',
                    area:'',
                    enterpriseNature:'',
                    enterpriseField:'',
                    personnelTotalNum:'',
                    personnelLeaderNum:'',
                    personnelCollegeNum:'',
                    personnelBachelorNum:'',
                    personnelMasterNum:'',
                    personnelDoctorNum:'',
                    intellectualPropertyNum:'',
                    patentNum:'',
                    trademarkNum:'',
                    softwareCopyrightNum:'',
                    projectInvestment:'',
                    projectTime:'',
                    projectDesc:''
                },
                rules: {
                    enterpriseName: [
                        { required: true, message: '必填项不可为空', trigger: 'blur' },
                    ],
                    creditCode:[
                        { required: true, message: '必填项不可为空', trigger: 'blur' },
                    ]
                },
                tableData: [],
                region:[],
                province:[],
                city:[],
                area:[]
            }
        },
        created(){
            this.buildTbable()
        },
        mounted(){
            // 从 localStorage 中获取数据
            var storedValueForm = localStorage.getItem('xc-zcjsq-form');
            var storedValueTable = localStorage.getItem('xc-zcjsq-table');

            if(storedValueForm){
                this.form = JSON.parse(storedValueForm) || {}
            }
            if(storedValueTable){
                this.tableData = JSON.parse(storedValueTable) || {}
            }

            this.getRegion(()=>{
                this.provinceChange(this.form.province,1)
                this.cityChange(this.form.city,1)
            })
            
        },
        methods: {
            buildTbable(){
                this.tableData = []
                const currentDate = new Date();
                const year = currentDate.getFullYear();
                for (let i = 0; i < 3; i++) {
                    this.tableData.push({
                        C0: year - i,
                        C1: '',
                        C2: '',
                        C3: '',
                        C4: '',
                        C5: '',
                        C6: '',
                    })
                }
            },
            provinceChange(val,isF){
                if(!isF){
                    this.form.area = undefined
                    this.area.splice(0, this.area.length);

                    this.form.city = ''
                    this.city.splice(0, this.city.length);
                }
                this.province.forEach(element => {
                    if(element.code == val) {
                        this.city.push(...element.children);
                    }
                });

            },
            cityChange(val,isF){
                if(!isF){
                    this.form.area = ''
                    this.area.splice(0, this.area.length);
                }
                this.city.forEach(element => {
                    if(element.code == val) {
                        this.area.push(...element.children);
                    }
                });
            },
            areaChange(val){

            },

            getRegion(callBack){
                let that = this
                $.ajax({
                    url: "${ApiPrefix}system/dict/data/region",
                    type: "get",
                    headers: {
                        "Authorization": new URL(window.location.href).searchParams.get('Authorization')
                    },
                    success: function(res) {
                        if (res.code == 200) {
                            that.region = res.data
                            that.province = res.data

                            callBack&&callBack()
                        }
                    }
                })
            },
            submitForm(formName,link) {
                this.$refs[formName].validate((valid) => {
                // 将数据存储到 localStorage 中
                localStorage.setItem('xc-zcjsq-form', JSON.stringify(this.form));
                localStorage.setItem('xc-zcjsq-table', JSON.stringify(this.tableData));

                if (valid) {
                    link = link +'&enterpriseName=' + this.form.enterpriseName
                        +'&enterpriseType=' + this.form.enterpriseType
                        +'&enterpriseNature=' + this.form.enterpriseNature
                        +'&enterpriseField=' + this.form.enterpriseField

                    window.location.href = link
                } else {
                    console.log('error submit!!');
                    return false;
                }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
                this.buildTbable()
            }
        }
    })
  </script>
</html>
